<template>
  <div class="articalNormalBox"> 
      <div class="articalImgBox" :style="styleObj">
          <div class="articalImgBoxCover"></div>
      </div>
     
          <div class="articalTital">
              <a href="#">基于 Gitee Go 的 Golang 持续集成部署体验</a>
              <div class="articalPublishTime">8月前</div>
          </div>
     
  </div>
</template>

<script>
export default {
    name:"ArticalNormal",
    data() {
        return {
            styleObj:{
                backgroundImage:'url("https://blog.gitee.com/wp-content/uploads/2020/12/89C901343587D4BD316173EF32E6DE50.png")',
            }
        }
    },
}
</script>

<style scoped>

.articalNormalBox{
    height: 280px;
    width: 259px;
    margin-bottom: 10px;
}
.articalImgBox{
    position: relative;
    width: 100%;
    height: 173px;
    background-repeat: no-repeat;
    background-size: cover;    
    cursor: pointer;
}   

.articalImgBoxCover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: .3;
    transition: all 0.6s;
}
.articalImgBox:hover >.articalImgBoxCover {
    opacity: 0;
}
.articalTital{
    padding: 12px 8px 0px 8px;
}
.articalTital > a:hover{
    color: #ff5d4a;
}
.articalPublishTime{
    margin-top: 10px;
    color: #8a92a9 ;
    font-size: 0.75rem ;
}

</style>